<template>
  <div class="main" v-loading="loading">
    <!-- 顶部按钮 -->
    <div class="btn">
      <button
        class="differentRegions"
        :class="{ active: areaMarket }"
        @click="toMarket"
      >
        单一品种不同地区平均价对比
      </button>
      <button
        class="differentRegions"
        :class="{ active: !areaMarket }"
        @click="toLocal"
      >
        单一品种某地多市场平均价对比
      </button>
    </div>
    <!-- 顶部查询-->
    <div class="area" v-show="difLocal">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :inline="true"
        class="search"
      >
        <el-form-item label="品种选择：">
          <el-cascader
            ref="cascader1"
            v-model="startProduct"
            :options="productOptions"
            collapse-tags
            placeholder="请选择品种"
            :props="props"
            @change="getProductName1"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="地区选择：">
          <el-select
            v-model="local"
            placeholder="请选择地区"
            :multiple-limit="5"
            multiple
            collapse-tags
          >
          <el-option
              v-for="item in countyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围：">
          <el-select v-model="dateType" placeholder="请选择时间">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="handleQuery"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="handleRefresh"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <div ref="chart1" style="width: 80%; height: 400px; margin: 0 auto"></div>

      <div class="form">
        <el-table
          :data="tableDataAll"
          border
          style="width: 80%; margin: 0 auto; font-size: 16px"
          :header-cell-style="{ color: '#000000', background: '#2adbb8' }"
        >
          <el-table-column
            prop="productName"
            label="品种名称"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="地区名称"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="date" label="日期"  align="center">
          </el-table-column>
          <el-table-column
            prop="price"
            label="平均价格（元/斤）"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="market" v-show="difMarket" v-loading="loading">
      <!-- 顶部查询(市场) -->
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :inline="true"
        class="search2"
      >
        <el-form-item label="品种选择：">
          <el-cascader
            ref="cascader2"
            :options="productOptions"
            v-model="startProduct"
            placeholder="请选择品种"
            :props="props"
            multiple
            collapse-tags
            @change="getProductName2"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="地区选择：">
          <el-select
            v-model="local2"
            placeholder="请选择地区"
            @change="changeLocal"
          >
            <el-option
              v-for="item in countyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市场选择：">
          <el-select
            v-model="market2"
            placeholder="请选择市场"
            :multiple-limit="5"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in marketOptions"
              :key="item.agrMarket.marketId"
              :label="item.agrMarket.marketName"
              :value="item.agrMarket.marketId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围：">
          <el-select v-model="dateType2" placeholder="请选择时间">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="handleQuery2"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="handleRefresh2"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div
        class="chart2"
        ref="chart2"
        style="width: 80%; height: 400px; margin: 0 auto"
      ></div>

      <div class="form">
        <el-table
          :data="tableDataAll2"
          border
          style="width: 80%; margin: 0 auto; font-size: 16px"
          :header-cell-style="{ color: '#000000', background: '#2adbb8' }"
        >
          <el-table-column
            prop="productName"
            label="品种名称"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="市场名称"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="date" label="日期" align="center">
          </el-table-column>
          <el-table-column
            prop="price"
            label="平均价格（元/斤）"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getPlaceList, getMarketByCounty,selectAllProductAndImg } from "@/api/price"
import { localPrice, MarketPrice } from "@/api/quote";
export default {
  data() {
    return {
      boolean: false,
      loading: true,
      areaMarket: true,
      // 不同地区
      difLocal: true,
      // 不用市场
      difMarket: false,
      // 产品id(默认为猪肉)
      productId: 101,
      // 时间 1周，2月，3季，4年
      dateType: "2",
      // 地区
      local: ["来安县", "凤阳县"],
      // 产品id
      productId2: 101,
      // 时间
      dateType2: "2",
      // 地区
      local2: "来安县",
      // 市场
      market2: [4, 5],
      //市场名
      marketName: ["清流市场", "来安县新农贸市场"],
      startProduct:[1,7,101],
      // 表单
      form: {},
      // 存放产品
      tableDataProduct: [],
      // 存放地区
      tableDataLocal: [],
      // 存放市场
      tableDataMarket: [],
      // 存放查找的产品信息(不同地区平均价)
      tableData: [],
      // 存放查找所有的产品信息（不同地区平均价）
      tableDataAll: [],

      tableDataAll_price: [],
      tableDataAll2_price: [],
      // 存放查找的产品信息(不同市场平均价)
      tableData2: [],
      // 存放查找所有的产品信息(不同市场平均价)
      tableDataAll2: [],
      // 时间
      options: [
        {
          label: "近一周",
          value: "1",
        },
        {
          label: "近一月",
          value: "2",
        },
        {
          label: "近一季",
          value: "3",
        },
        {
          label: "近一年",
          value: "4",
        },
      ],
      // 选中的产品名
      // 地区
      productName1: "猪肉",
      // 市场
      productName2: "猪肉",

      areaDate: [],
      marketDate: [],

      width: 0,
      height: 0,
      // value: 'returnValue' 
      props: { },
      queryParams: {
        county: null,
        marketId: null,
        productId: null,
        productItem: null,
      },
      countyOptions: [],
      productOptions: [],
      marketOptions: [],
    };
  },
  mounted() {
    this.productId = 101
    this.getListLocalPrice();
    setTimeout(() => {
      // 单一品种不同市场平均价的对比
      this.getListMarketPrice();
      // 延迟获取（等到拿到marketOption）
      this.getMarketName();
    }, 500);
  },
  created() {
    this.getProductToSelect()
    this.getPlace()
    this.getMarket()
  },
  methods: {
    getProductToSelect(){
      selectAllProductAndImg().then((res) => {
        res.data.forEach(item => {
          this.productOptions.push(this.transformProductTree(item))
        });
      })
    },
    getPlace() {
      getPlaceList().then(res => {
        res.data.forEach((item, index) => {
          this.countyOptions.push({
            value: item,
            label: item,
          })
        })
      })
    },
    getMarket() {
      getMarketByCounty({
        county: this.local2
      }).then(res => {
        this.marketOptions = res.data
      })
    },
    // 查询每个地区的市场
    changeCountyEvent(item) {
      this.getMarket()
      this.queryParams.marketId = null
    },
    // 重构为树形结构 
    transformProductTree(obj) {
      return {
        value: obj.agrProduct.productId,
        label: obj.agrProduct.productName,
        children: obj.productAndImgVoList && obj.productAndImgVoList.length > 0 ?
                  obj.productAndImgVoList.map(this.transformProductTree) : undefined,
        // 用于得到选中时返回的对象
        returnValue: {
          productId: obj.agrProduct.productId,
          parentId: obj.agrProduct.parentId,
          productName: obj.agrProduct.productName,
        }
      };
    },
    // 地区：选中产品，获取产品名
    getProductName1(item) {
      // 选中的产品名(为了初始默认选中，则换了种方式)
      // this.productName1 = item[2].productName;
      // this.productId = item[2].productId
      this.productId = item[2]
      this.productOptions.forEach(item_1 => {
        if (item_1.value === item[0]) {
          item_1.children.forEach(item_2 => {
            if (item_2.value === item[1]) {
              item_2.children.forEach(item_3 => {
                if (item_3.value === item[2]) {
                  this.productName1 = item_3.label;
                }
              })
            }
          })
        }
      })

    },
    // 市场：选中产品，获取产品名
    getProductName2(item) {
      // 选中的产品名(为了初始默认选中，则换了种方式)
      // this.productName2 = item[2].productName;
      // this.productId2 = item[2].productId
      this.productId2 = item[2]
      this.productOptions.forEach(item_1 => {
        if (item_1.value === item[0]) {
          item_1.children.forEach(item_2 => {
            if (item_2.value === item[1]) {
              item_2.children.forEach(item_3 => {
                if (item_3.value === item[2]) {
                  this.productName2 = item_3.label;
                }
              })
            }
          })
        }
      })
    },
    // 单一品种不同地区平均价的对比
    getListLocalPrice() {
      localPrice(this.productId, this.dateType, this.local).then((res) => {
        this.tableData = res.data;
        // 数组置空，防止累加重复数据
        this.tableDataAll = [];
        for (let i = 0; i < this.local.length; i++) {
          this.tableDataAll = this.tableDataAll.concat(
            this.tableData[this.local[i]]
          );
        }

        // 遍历数组中的每个对象，为this.tableDataAll每个数据添加产品名属性
        this.tableDataAll.forEach((item) => {
          item.productName = this.productName1;
        });

        // 防止数据叠加
        this.tableDataAll_price = [];
        let arr = Object.keys(this.tableData);
        for (let i = 0; i < this.local.length; i++) {
          if (this.tableData[arr[i]].length == 0) {
            this.tableDataAll_price.push([]);
          } else {
            let a = [];
            // 防止日期叠加
            let date = [];
            for (let j = 0; j < this.tableData[arr[i]].length; j++) {
              a.push(this.tableData[arr[i]][j].price);
              date.push(this.tableData[arr[i]][j].date);
            }
            this.tableDataAll_price.push(a);
            this.areaDate = date;
          }
        }
        this.loading = false;
        this.initCharts1();
      });
    },
    //单一品种多市场的对比
    getListMarketPrice() {
      MarketPrice(this.productId2, this.dateType2, this.market2).then((res) => {
        this.tableData2 = res.data;
        // 数组置空，防止累加重复数据
        this.tableDataAll2 = [];
        for (let i = 0; i < this.market2.length; i++) {
          this.tableDataAll2 = this.tableDataAll2.concat(
            this.tableData2[this.market2[i]]
          );
        }
        // 遍历数组中的每个对象，为this.tableDataAll2每个数据添加产品名属性
        this.tableDataAll2.forEach((item) => {
          item.productName = this.productName2;
          item.local = this.local2;
          item.remark = this.local2 + "——" + item.remark;
        });

        // 防止数据叠加
        this.tableDataAll2_price = [];
        let arr = Object.keys(this.tableData2);

        // 使用arr，顺序查询,顺序把数据放进数组
        for (let i = 0; i < this.market2.length; i++) {
          if (this.tableData2[arr[i]].length == 0) {
            this.tableDataAll2_price.push([]);
          } else {
            let a = [];
            // 防止日期叠加
            let date = [];
            for (let j = 0; j < this.tableData2[arr[i]].length; j++) {
              a.push(this.tableData2[arr[i]][j].price);
              date.push(this.tableData2[arr[i]][j].date);
            }
            this.tableDataAll2_price.push(a);
            this.marketDate = date;
          }
        }
        this.initCharts2();
      });
    },

    getMarketName() {
      this.marketName = [];
      this.marketOptions.forEach((itemOption, index) => {
        this.market2.forEach((item, index)=> {
          if (item === itemOption.agrMarket.marketId) {
            this.marketName.push(itemOption.agrMarket.marketName);
          }
        })
      })
    },
    // 查询按钮
    handleQuery() {
      if (typeof this.productId !== "number") {
        // pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
        this.productId = this.productId.pop();
      }
      this.getListLocalPrice();
    },
    // 重置按钮
    handleRefresh() {
      this.productId = 101; //猪肉
      this.dateType = "2";
      this.productName1 = "猪肉";
      this.local = ["来安县", "凤阳县"];
      this.getListLocalPrice();
    },
    handleQuery2() {
      if (typeof this.productId2 !== "number") {
        // pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
        this.productId2 = this.productId2.pop();
      }
      // 更新选择后的市场名
      this.getMarketName();
      this.getListMarketPrice();
    },
    handleRefresh2() {
      this.productId2 = 101;
      this.dateType2 = "2";
      this.local2 = "来安县";
      this.market2 = [4, 5];
      this.marketName = ["清流市场", "来安县新农贸市场"];
      this.productName2 = "猪肉";
      // 根据地区查市场
      this.getMarket();

      this.getListMarketPrice();
    },
    // 切换顶部按钮
    toMarket() {
      this.areaMarket = true;
      this.difLocal = true;
      this.difMarket = false;
      // this.showMarket = false
      this.$nextTick(() => {
        this.initCharts1();
      });
    },
    toLocal() {
      this.areaMarket = false;
      this.difLocal = false;
      this.difMarket = true;
      // this.showMarket = true
      this.$nextTick(() => {
        this.initCharts2();
      });
    },
    // 切换地区时查找市场
    changeLocal() {
      this.market2 = [];
      this.getMarket()
    },
    getAreaSeries() {
      let series = [];
      for (let i = 0; i < this.local.length; i++) {
        series.push({
          name: this.local[i],
          type: "line",
          data: this.tableDataAll_price[i],
        });
      }
      return series;
    },
    // 不同地区---折线图初始化
    initCharts1() {
      let $ele = this.$refs.chart1;
      // 宽
      this.width = $ele.offsetWidth;
      // 高
      this.height = $ele.offsetHeight;
      let myChart = echarts.init(this.$refs.chart1);
      // 获取当前的Echarts实例以后，直接this.myChart.clear(),防止重置数据后，有旧数据残留
      myChart.clear();
      // 绘制图表
      var option = {
        title: {
          text: "所选品种：" + this.productName1,
          subtext: "单位：元/斤",
        },
        // 标题组件，包含主标题和副标题。
        // title: { text: '在Vue中使用echarts' ,
        // subtext: 'Fake Data'},
        // 提示框组件。提示框组件可以设置在多种地方：
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          // echarts折线图显示各个地区（来安县···）
          data: this.local,
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        // 直角坐标系内绘图网格，单个grid内最多可以放置上下两个X轴，左右两个Y轴。
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          // x轴坐标名
          name: "日期",
          nameLocation: "end", //x坐标轴名称的位置
          boundaryGap: false,
          data: this.areaDate,
          // nameTextStyle: {//x坐标轴名称的字体样式
          //   color: "red",
          //   fontSize: 16,
          //   padding: 10
          // }
        },
        yAxis: {
          // name: "价格：元/公斤",
          // nameLocation: end,
        },

        series: this.getAreaSeries(),
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        //监听窗口变动实时渲染
        myChart.resize();
      });
    },
    getMarketSeries() {
      let series = [];
      for (let i = 0; i < this.market2.length; i++) {
        series.push({
          name: this.marketName[i],
          type: "line",
          data: this.tableDataAll2_price[i],
        });
      }
      return series;
    },
    // 某地区---折线图初始化
    initCharts2() {
      const setEchartWH = {
        //设置控制图表大小变量
        width: this.width,
        height: this.height,
      };
      let myChart = echarts.init(this.$refs.chart2, null, setEchartWH);
      // 获取当前的Echarts实例以后，直接this.myChart.clear(),防止重置数据后，有旧数据残留
      myChart.clear();
      // 绘制图表
      var option = {
        title: {
          text: "所选品种：" + this.productName2,
          subtext: "单位：元/斤",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          // echarts折线图显示各个市场
          data: this.marketName,
        },
        // 直角坐标系内绘图网格，单个grid内最多可以放置上下两个X轴，左右两个Y轴。
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          // x轴坐标名
          name: "日期",
          nameLocation: "end", //x坐标轴名称的位置
          boundaryGap: false,
          data: this.marketDate,
        },
        yAxis: {
          // name: "价格：元/公斤",
        },

        series: this.getMarketSeries(),
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        //监听窗口变动实时渲染
        myChart.resize();
      });
    },
  },
};
</script>
  
<style scoped lang="less">
.main {
  /* 等比例缩放 */
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  margin: 30px auto;
}

/* 顶部选择按钮 */
.btn {
  width: 1200px;
  margin: 30px auto;
  display: flex;
  justify-content: space-around;

  button {
    // width: 100%;
    width: 600px;
    height: 40px;
    line-height: 35px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    border: 0;
  }

  button:hover {
    background: #2adbb8;
    cursor: pointer;
  }

  button.active {
    background: #1abc9c;
  }
}

/* 不同地区品均价对比 */
.differentRegions {
  font-size: 18px;
  width: 50%;
}

/* 不同市场品均价对比 */
.differentMarket {
  font-size: 18px;
  width: 50%;
}

/* 顶部查询 */
.search {
  width: 90%;
  height: 50px;
  margin: 0 auto;
  text-align: center;
}

.search2 {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  text-align: center;
}

.el-form {
  /* 控制HTML页面内容不能选中 */
  user-select: none;
  -webkit-user-seletct: none;
  -moz-user-seletct: none;
  -ms-user-seletct: none;
  margin-bottom: 60px;
}

.el-cascader {
  font-weight: bold;
}

// el-table表格边框样式
/deep/ .el-table {
  font-size: 16px;
  // font-weight: 700;
  border-color: #63dfff;
}

/deep/ .el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #63dfff !important;
}

/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #63dfff !important;
}

/deep/ .el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
  // border-bottom: 1px solid #63DFFF;
  border-bottom: 1px solid #63dfff;
}

/deep/ .el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #63dfff;
}

.form {
  margin-top: 40px;
}
</style>